<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=3.0&ak={:GetConfig('system', 'baidu_key')}"></script>
</head>
<body>
<input class="address" type="hidden">
<div class="view_body">
    <form class="layui-form" action="">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6">
                <div id="map-container" style="width: 100%; height: 500px;"></div>
            </div>
            <div class="layui-col-xs6">
                <div class="search-input-box">
                    <input id="searchAddress" type="text" placeholder="请输入地址" class="layui-input">
                </div>
                <div class="poi-box"></div>
            </div>

        </div>
    </form>
    <div id="r-result"></div>
</div>
<style>
    .poi-box {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        height: 450px;
        overflow: hidden;
        overflow-y: auto;
        cursor: pointer;
        padding: 8px 8px 8px 0;
    }

    .poi-box .poi-item {
        width: 100%;
        padding: 10px;
        border: 1px solid transparent;
        border-bottom: 1px solid #eee;
        position: relative;
        display: flex;
        -webkit-box-align: stretch;
        align-items: stretch;
    }
    .poi-box .poi-item.on{
        background:#f5f5f5;

    }
    .poi-box .poi-item:hover {
        background: #f5f5f5;
    }

    .poi-box .poi-item .poi-content {
        -webkit-box-flex: 1;

        flex: 1;
        max-width: calc(100% - 40px);
    }

    .poi-box .poi-item .poi-content .poi-title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .poi-box .poi-item .poi-content .poi-address {
        font-size: 12px;
        color: #999;
    }

    .poi-right-box {
        width: 40px;
        justify-content: center;
        align-items: center;
        display: flex;
    }
</style>
<script>
    let $ = layui.jquery;
    let jQuery = $;
    let address=[];
    geolocation();

    function geolocation()
    {
        let geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                BindMap(r.point);
            }
            else
            {
                BindMap();
            }
        })
    }
    function BindMap(point='') {
        let map = new BMap.Map("map-container");
        if (point=='') {
            point = new BMap.Point(113.410789, 23.118483);
        }
        map.centerAndZoom(point, 20);
        map.enableScrollWheelZoom(true);
        let marker = new BMap.Marker(point);
        map.addOverlay(marker);
        map.addEventListener("moving", function (e) {
            let click = e.target.ge;
            map.clearOverlays();
            let marker = new BMap.Marker(click);
            map.addOverlay(marker);
        })
        map.addEventListener("moveend", function (e) {
            getAddressList(e.target.ge,map)
        })
        getAddressList(point,map)
        let ac = new BMap.Autocomplete({
            input: "searchAddress",
            location: map,
        });
        ac.addEventListener("onconfirm", function (e) {
            map.clearOverlays();
            let local = new BMap.LocalSearch(map, {
                onSearchComplete: function (res) {
                    let poi = res.getPoi(0);
                    var point = poi.point;
                    map.centerAndZoom(point, 20);
                    map.addOverlay(new BMap.Marker(point));
                }
            });
            let searchValue = e.item.value;
            local.search(
                searchValue.province +
                searchValue.city +
                searchValue.district +
                searchValue.street +
                searchValue.business
            )
        });
    }

    function getAddressList(point,map) {
        let geoCoder = new BMap.Geocoder();
         let LocationOptions={numPois:20,poiRadius:250};
        geoCoder.getLocation(point, res => {
            let html = '';
            let arr=res.surroundingPois || [];
            address=arr;
            for (let i = 0; i < arr.length; i++) {
                html += '<div class="poi-item" onclick="ChooseAddress('+i+')">' +
                    '                        <div class="poi-content">' +
                    '                            <div class="poi-title">' + arr[i].title + '</div>' +
                    '                            <div class="poi-address j-ellipsis">' + arr[i].address + '</div>' +
                    '                        </div>\n' +
                    '                        <div class="poi-right-box">' +
                    '                            <div class="poi-icon"><i class="ruinuo-icon icon-map"></i></div>' +
                    '                        </div>' +
                    '                    </div>'
            }
            $(".poi-box").html(html);
        },LocationOptions)

    }

    function ChooseAddress(index)
    {
        $(".poi-box .poi-item").removeClass('on');
        $(".poi-box .poi-item").eq(index).addClass('on');
        let info=address[index]['address']+ address[index]['title'];
        $(".address").val(info)
    }

    function SendVal() {
        return $(".address").val();
    }
</script>

</body>
</html>